import React, { Component } from 'react'
import './App.css'
var bases=[
  {id:1,basename:'昌平⼀库',items:[{id:1,name:'⼩⽶电视5s',count:120},{id:2,name:'华为Mate40',count:35}]},
  {id:9,basename:'怀柔六库',items:[{id:1,name:'九阳⾖浆机',count:40},{id:8,name:'苹果⼿机',count:370},{id:9,name:'⼤疆⽆⼈机',count:170},{id:23,name:'益达⼝⾹糖',count:1370}]},
  {id:6,basename:'顺义三库',items:[{id:1,name:'充电线',count:300},{id:6,name:'洗⾐机',count:30},{id:9,name:'耐克',count:70},{id:3,name:'冰箱',count:10}]}]
export default class App extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       num:['','','',''],
       major:'',
       bases:bases,me:bases[0]

    }
  }
  _del=(major)=>{
    let index=this.state.id.indexOf(major)
    let id=this.state.id.slice(0)
    id.splice(index,1)
    this.setState({id})
}
_side(base){
  this.setState({me:base})
}
  render() {
    return (
      <div id='App'>
        <div id='top'>
            
              {this.state.me.items.map(item=>{
            return <div id="block">编号:{item.id}<br/>品名：{item.name}<br/>数量：{item.count}</div>
            })}
        </div>
        <div id='bottom'>
          <div id='left'>
            
              <tr>
                <td>
                  id
                </td>
                <td>
                  品名
                </td>
                <td>
                  数量
                </td>
              </tr>
                <td></td>
                <td><button onClick={(major)=>this._del(major)}style={{backgroundColor:"lightblue"}}>删除</button></td> 
          </div>
          <div id='right'>
            {this.state.bases.map(base=>{
              return <p onClick={()=>this._side(base)}>{base.basename}</p>
            })}
            
          </div>
        </div>       
      </div>
      
    )
  }
}
